<template>
  <el-dialog
    title="温湿度阈值设置"
    :visible.sync="show"
    width="500px"
    :close-on-click-modal="false"
    @close="cancel"
  >
    <el-form
      :model="editForm"
      ref="editForm"
      :rules="rules"
      size="small"
      label-width="100px"
    >
      <el-form-item label="温度最小值" prop="temperatureMin">
        <el-input v-model="editForm.temperatureMin" type="number">
          <span slot="suffix">°C</span>
        </el-input>
      </el-form-item>
      <el-form-item label="温度最大值" prop="temperatureMax">
        <el-input v-model="editForm.temperatureMax" type="number">
          <span slot="suffix">°C</span>
        </el-input>
      </el-form-item>
      <el-form-item label="湿度最小值" prop="humidityMin">
        <el-input v-model="editForm.humidityMin" type="number">
          <span slot="suffix">%RH</span>
        </el-input>
      </el-form-item>
      <el-form-item label="湿度最大值" prop="humidityMax">
        <el-input v-model="editForm.humidityMax" type="number">
          <span slot="suffix">%RH</span>
        </el-input>
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button @click="show = false">取 消</el-button>
      <el-button type="primary" @click="submitForm">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { editThreshold } from "@/api/mc/cabinet";
export default {
  name: "sensor-config",
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    form: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      editForm: {
        id: "",
        temperatureMin: 0,
        temperatureMax: 0,
        humidityMin: 0,
        humidityMax: 0,
      },
      rules: {
        temperatureMin: [
          { required: true, message: "请输入温度最小值", trigger: "blur" },
        ],
        temperatureMax: [
          { required: true, message: "请输入温度最大值", trigger: "blur" },
        ],
        humidityMin: [{ required: true, message: "请输入湿度最小值", trigger: "blur" }],
        humidityMax: [{ required: true, message: "请输入湿度最大值", trigger: "blur" }],
      },
    };
  },
  computed: {
    show: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", val);
      },
    },
  },
  watch: {
    form: {
      handler(val) {
        if (val) {
          Object.keys(this.editForm).forEach((key) => {
            this.editForm[key] = val[key];
          });
        }
      },
      immediate: true,
    },
  },
  methods: {
    // 改变表单
    submitForm() {
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          editThreshold(this.editForm).then((res) => {
            if (res.code === 200) {
              this.$modal.msgSuccess("保存成功");
              this.show = false;
            }
          });
        }
      });
    },
    cancel() {
      this.$refs.editForm.resetFields();
      this.$emit("close");
    },
  },
};
</script>
<style lang="scss" scoped>
.sensor-panel {
  width: 100%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #72b5f8;
  box-shadow: inset 0 0 10px rgba(64, 160, 255, 0.2);
  border-radius: 10px;
  padding: 10px;
  font-size: 14px;
}
</style>
